<script setup>
import Tapbar from "../../components/tapbar.vue";
import {ref, onMounted, reactive, watch} from 'vue';
import {onReady, onPullDownRefresh, onLoad} from "@dcloudio/uni-app";
import {getClassListAPI} from '/src/api/classification/classApi'

const indexs = ref(0)
const right = ref()
const rightHeight = ref(0)
let tableData = ref([]);
const navList = ref([
  {
    name: '应季推荐',
    index: 1
  },
  {
    name: '时令水果',
    index: 2
  },
  {
    name: '品质肉禽',
    index: 3
  },
  {
    name: '海鲜水产',
    index: 4
  },
  {
    name: '面点烘烙',
    index: 5
  },
  {
    name: '乳品冷饮',
    index: 6
  },
  {
    name: '预制菜肴',
    index: 7
  },
  {
    name: '火锅丸料',
    index: 8
  },
  {
    name: '肉制品',
    index: 9
  },
  {
    name: '蔬菜蛋品',
    index: 10
  },
])

function onNav(index) {
  indexs.value = index
  getClassList(index + 1)
}

onLoad(() => {
  getClassList(1)
  uni.showToast({
    icon: 'loading'
  })
})

onReady(() => {
  uni.hideToast();
})

onMounted(() => {

})

// 分类列表
async function getClassList(id) {
  const {data, msg, state} = await getClassListAPI(id)
  console.log("分类数据", data);
  if (state === 200) {
    tableData.value = data
  }
}

function onToShopList() {
  uni.navigateTo({
    url:'/classification/shopList/shopList?id=1'
  })
}

function onToSearch() {
  uni.navigateTo({url: '/pages/search/search'})
}
</script>

<template>
  <view>
    <Tapbar :value1="1"></Tapbar>
  </view>
  <view>
    <!--   搜索-->
    <view class="search-input">
      <view class="input-box">
        <up-input
            border="none"
            placeholder="输入搜索关键词"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399;"
            @focus="onToSearch"
            customStyle="width:627rpx;border:1px red solid;height:61rpx;border-radius:60rpx;"
        ></up-input>
      </view>
      <view class="title">
        <image src="/src/assets/shao.png"></image>
        <view class="saoTitle">扫一扫</view>
      </view>
    </view>
  </view>
  <!--  分类内容-->
  <view>
    <view class="content">
      <view class="left">
        <view class="left-min" v-for="(item,index) in navList" :data-index="index" @click="onNav(index)" :key="index">
          <view class="left-title" :style="indexs === index?'background:red;':'background:#fff;color:black'">
            {{ item.name }}
          </view>
        </view>
      </view>
      <scroll-view scroll-y="true" :scroll-top="rightHeight" class="right right-class" ref="right" id="right">
        <view class="right-min" :id="`refHeight${index}`">
          <view class="right-min-content">
            <view class="shop-min" @click="onToShopList" v-for="(item,index) in tableData" :key="index">
              <image class="image" :src="item.cat_img"></image>
              <view class="shop-title">{{ item.cat_name }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.search-input {
  border-radius: 20rpx !important;
  width: 100%;
  box-sizing: border-box;
  padding-left: 32rpx;
  height: 66rpx;
  display: flex;
  margin-top: 66rpx;

  .input-box {
    width: 627rpx;
    height: 66rpx;
  }

  .title {
    height: 66rpx;
    text-align: center;
  }

  image {
    width: 34rpx;
    height: 30rpx;
  }

  .saoTitle {
    font-size: 6rpx;
  }
}

// 内容
.content {
  width: 750rpx;
  height: 100vh;
  margin-top: 31rpx;
  border-top: 1px rgba(0, 0, 0, 0.2) solid;
  display: flex;

  .left {
    width: 191rpx;
    height: 100%;
    border-right: 1px rgba(0, 0, 0, 0.2) solid;

    .left-title {
      width: 139rpx;
      height: 50rpx;
      font-size: 24rpx;
      line-height: 50rpx;
      text-align: center;
      background: red;
      border-radius: 25rpx;
      color: #fff;
      margin-left: 30rpx;
      margin-top: 25rpx;
    }
  }

  .right {
    flex: 1;
    //overflow:scroll;
    .right-min {
      width: 100%;

      .right-title {
        height: 85rpx;
        margin-left: 40rpx;
        margin-top: 35rpx;
      }

      .right-min-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding-left: 20rpx;

        .shop-min {
          width: 136rpx;
          margin-right: 40rpx;
          text-align: center;
          margin-bottom: 41rpx;

          .image {
            width: 136rpx;
            height: 136rpx;
          }

          .shop-title {
            font-size: 23rpx;
            margin-top: 22rpx;
            color: rgba(0, 0, 0, 0.48);
          }
        }
      }
    }
  }
}
</style>
